<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="/css/h5/information_detail/amazeui.min.css"/>
    <link rel="stylesheet" href="/css/h5/information_detail/wap.css"/>
    <link rel="stylesheet" href="/js/plugins/FroalaEditor/css/froala_editor.min.css"/>
    <title th:text="${tInformation.title}"></title>
    <style>
        @media (max-width: 767px) {
            #content img{
                width:100%;
            }
        }

        .author-span{
            display: block;
            margin:3px 0px;
        }

        .pet_list_one_bt{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .am-list-thumb img{
            max-width:100px;
            max-height:100px;
            border-radius: 4px;
        }

        .pet_article_user_time{
            margin-top:3px;
        }

        .infor-author{
            margin-right: 5px;
        }

        .froala-element.f-basic{
            padding: 0px;
        }

        .pv{
            float: right;
            margin-right: 10px;
        }

        .pet_article_dowload_triangle{
            border-bottom: solid 11px #f7f7f7;
            border-left: solid 11px transparent;
            border-right: solid 11px transparent;
        }

        #commentArea{
            min-height: 100px;
            height: auto;
            padding: 6px 10px;
            /*resize: vertical;*/
            width:100%;
            border-radius: 6px;
            color: #4d4d4d;
            resize:none;
        }

        .like_click{
            background: #f2f2f2!important;
        }

    </style>
</head>
<body style="background:#ececec">
<!--<input type="hidden" id="shareImg" th:value="${#httpServletRequest.getScheme()+'://'+#httpServletRequest.getServerName()+':'+#httpServletRequest.getServerPort()+#httpServletRequest.getContextPath()+'/images/zyzl_head2.png'}"/>-->
<div class="pet_mian" >

    <div class="pet_content">
        <div class="pet_content_block">
            <article data-am-widget="paragraph" class="am-paragraph am-paragraph-default pet_content_article" data-am-paragraph="{ tableScrollable: true, pureview: true }">
                <h1 class="pet_article_title" th:text="${tInformation.title}"></h1>
                <div class="pet_article_user_time">
                    <span class="infor-author" th:text="${tInformation.author}"></span>
                    <span th:text="${publishTime}"></span>
                    <span class="pv" th:if="${ifLogin}=='1'">浏览量：<span th:text="${pv}"></span></span>
                </div>

                <input type="hidden" th:value="${tInformation.videoUrl}" id="videoUrl"/>
                <!--<input id="shareImg" type="hidden" th:if="${#strings.contains(tInformation.coverUrl,'@@@@')}" th:value="${#strings.substring(tInformation.coverUrl,0,#strings.indexOf(tInformation.coverUrl,'@@@@'))}" />-->
                <!--<input id="shareImg" type="hidden" th:if="${not #strings.contains(tInformation.coverUrl,'@@@@')}" th:value="${tInformation.coverUrl}" />-->

                <input id="shareTitle" type="hidden" th:value="${tInformation.title}"/>
                <div id="youkuplayer" style="display: none;">
                    <!--<iframe height="200" width="100%" src='http://player.youku.com/embed/XMzE5NjgyNDM5Mg==' frameborder="0"  allowfullscreen="true"></iframe>-->
                </div>

                <p class="paragraph-default-p">
                <div id= "content" contenteditable="false" class="froala-element not-msie f-basic" style="outline: 0px; height: 100%; border: none;" spellcheck="true" data-placeholder="输入一些内容" th:utext="${tInformation.content}">

                </div>
                </p>

            </article>
        </div>

        <div class="pet_article_dowload" th:if="${ifLogin}=='2'">
            <div class="pet_article_dowload_title" style="color: #666;">我想说点啥...</div>
            <div class="pet_article_dowload_content"><div class="pet_article_dowload_triangle"></div>
                <!--<div class="pet_article_dowload_ico"><img src="img/footdon.png" alt=""/></div>-->
                <div class="pet_article_dowload_content_font" style="margin-left: 16px;">
                    <textarea name="" id="commentArea"></textarea>
                </div>
                <div class="pet_article_dowload_all">
                    <a href="javascript:void(0);" class="pet_article_dowload_Az"><i class="icon iconfont">&#xe68d;</i>发表</a>
                    <!--<a href="###" class="pet_article_dowload_Pg am-icon-android"> Android</a>-->
                </div>
            </div>
        </div>


        <div class="pet_comment_list" th:if="${ifLogin}=='2'">
            <div class="pet_comment_list_wap"><div class="pet_comment_list_title">精彩评论</div>

                <div data-am-widget="tabs" class="am-tabs am-tabs-default pet_comment_list_tab" >
                    <div class="am-tabs-bd pet_pl_list">
                        <div class="am-tab-panel am-active" >
                            <div class="pet_comment_list_block" th:each="comment:${comments}">
                                <div class="pet_comment_list_block_l"><img th:src="${comment.url}" alt=""/></div>
                                <div class="pet_comment_list_block_r">
                                    <div class="pet_comment_list_block_r_info" th:text="${comment.userName}"></div>
                                    <div class="pet_comment_list_block_r_text" th:text="${comment.content}"></div>
                                    <div class="pet_comment_list_block_r_bottom">
                                        <div class="pet_comment_list_bottom_info_l">10分钟前</div>
                                        <div class="pet_comment_list_bottom_info_r">
                                            <span><i class="iconfont">&#xe631;</i>5 </span>
                                            <!--<span> 回复</span>-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="pet_article_like">
            <div class="pet_article_like_title">最新资讯</div>
            <div class="pet_content_main pet_article_like_delete">
                <div data-am-widget="list_news" class="am-list-news am-list-news-default am-no-layout">
                    <div class="am-list-news-bd">
                        <ul class="am-list" id="likeList">
                            <!--缩略图在标题右边-->
                            <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block intro_li" th:each="infor:${list}" th:attr="infoId=${infor.id}">
                                <!--<div class="pet_list_one_info">-->
                                <!--<div class="pet_list_one_info_l">-->
                                <!--<div class="pet_list_one_info_ico">-->
                                <!--<img src="${#strings.substring(${infor.coverUrl},0,${#strings.indexOf(${infor.coverUrl},'@@@@')})}" alt=""/>-->
                                <!--</div>-->
                                <!--<div class="pet_list_one_info_name">${infor.author}</div>-->
                                <!--</div>-->
                                <!--<div class="pet_list_one_info_r">-->
                                <!--<div class="pet_list_tag pet_list_tag_xxs">新鲜事</div>-->
                                <!--</div>-->
                                <!--</div>-->
                                <div class=" am-u-sm-8 am-list-main pet_list_one_nr">
                                    <h3 class="am-list-item-hd pet_list_one_bt">
                                        <a class="" th:text="${infor.title}" th:alt-title="${infor.title}"></a>
                                    </h3>
                                    <span th:text="${infor.author}" class="author-span"></span>

                                    <span th:if="not ${#strings.isEmpty(infor.publishTime)}" th:text="${#strings.substring(infor.publishTime,0,16)}" class="author-span"></span>
                                    <!--<div class="am-list-item-text pet_list_one_text">-->
                                    <!--每逢长假，总有那么一群人选择远离人山人海，静静地呆在家，坐在电脑电视前。长时间的工作学习让他们感觉很疲惫，对什么都提不起劲，打开电脑却不知道干什么好…-->
                                    <!--</div>-->

                                </div>
                                <div class="am-u-sm-4 am-list-thumb">
                                    <a href="javascript:void(0)" class="" th:if="${#strings.contains(infor.coverUrl,'@@@@')}">
                                        <img th:src="${#strings.substring(infor.coverUrl,0,#strings.indexOf(infor.coverUrl,'@@@@'))}" alt=""/>
                                    </a>
                                    <a href="javascript:void(0)" class="" th:if="${not #strings.contains(infor.coverUrl,'@@@@')}">
                                        <img  th:src="${infor.coverUrl}" alt=""/>
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>

            </div>


        </div>

        <div class="pet_article_dowload">
            <div class="pet_article_dowload_title">关于至娱</div>
            <div class="pet_article_dowload_content" id="home_refer"><div class="pet_article_dowload_triangle"></div>
                <div class="pet_article_dowload_ico"><img th:src="@{/images/zyzl_head2.png}" alt=""/></div>
                <div class="pet_article_dowload_content_font">
                    至娱APP是一个影视娱乐专业资讯发布平台。传播平台包括至娱官网、至娱APP、至娱APP官方媒体、至娱APP微信公众平台，以及多渠道平台的至娱APP自媒体号。
                    欢迎合作!
                </div>

            </div>
        </div>

        <div class="pet_article_footer_info">Copyright(c)2018 All Rights Reserved</div>
    </div>
</div>
<input type="hidden" id="url" th:value="${url}"/>
<script src="/js/common/jquery-2.1.1.min.js"></script>
<script src="/js/h5/amazeui.min.js"></script>
<script>

    $(function(){

        //player = new YKU.Player('youkuplayer',{styleid: '0',client_id: 'e7e4d0ee1591b0bf',vid: 'XMTg0NDU1MTk4MA',newPlayer: true});


        var videoUrl = $("#videoUrl").val();
        if(videoUrl){
            var html = '<iframe height="200" width="100%" src="' + videoUrl + '" frameborder="0"  allowfullscreen="true"></iframe>';
            $("#youkuplayer").show().append(html)
        }

        // 动态计算新闻列表文字样式
        auto_resize();
        $(window).resize(function() {
            auto_resize();
        });
        $('.am-list-thumb img').load(function(){
            auto_resize();
        });
        $('.pet_article_like li:last-child').css('border','none');
        function auto_resize(){
            $('.pet_list_one_nr').height($('.pet_list_one_img').height());
            // alert($('.pet_list_one_nr').height());
        }
        $('.pet_article_user').on('click',function(){
            if($('.pet_article_user_info_tab').hasClass('pet_article_user_info_tab_show')){
                $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_show').addClass('pet_article_user_info_tab_cloes');
            }else{
                $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_cloes').addClass('pet_article_user_info_tab_show');
            }
        });

        $('.pet_head_gd_ico').on('click',function(){
            $('.pet_more_list').addClass('pet_more_list_show');
        });
        $('.pet_more_close').on('click',function(){
            $('.pet_more_list').removeClass('pet_more_list_show');
        });

        $(".intro_li").css("borderBottom","1px solid #f2f2f2");

        $("#likeList").find("li").click(function () {
            $(this).addClass("like_click").siblings("li").removeClass("like_click");
            var infoId = $(this).attr("infoId");
            window.location.href = "/api/detail/information/"+infoId;
        });

        $('#home_refer').click(function(){
            $(this).addClass("like_click");
            window.setTimeout(function(){
                window.location.href = "http://home.zhiyume.com/zydownload";
            },500);
        });
    });

</script>

<script th:src="@{/js/weixin/jweixin-1.4.0.js}"></script>
<script>
    /*<![CDATA[*/
    var imgUrl = "http://zhiyume-img.oss-cn-beijing.aliyuncs.com/information/20190331141907_zyzl.png?Expires=1869373147&OSSAccessKeyId=LTAI8hTtxsI962e5&Signature=TKCSijQO3Nf%2BYRYH6g%2F8LcmtDak%3D";
    /*]]>*/
    $.ajax({
        type: "POST",
        url: "/api/detail/getweixinconfig",
        data: {
            url : location.href.split('#')[0]
        },
        async: true,
        success: function(res){
            console.info(res);
            var data = res;
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data['appid'], // 必填，公众号的唯一标识
                timestamp: data['timestamp'], // 必填，生成签名的时间戳
                nonceStr: data['nonceStr'], // 必填，生成签名的随机串
                signature: data['signature'],// 必填，签名
                jsApiList: [
                    'updateAppMessageShareData',
                    'updateTimelineShareData'
                ] // 必填，需要使用的JS接口列表
            });

            var url = $('#url').val();
            var title = $('#shareTitle').val();
            wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                wx.updateAppMessageShareData({
                    title: title, // 分享标题
                    desc: title, // 分享描述
                    link: url,
                    imgUrl: imgUrl,
                    success: function () {
                        // 设置成功
                        // 可以记录分享了
                    }
                });

                wx.updateTimelineShareData({
                    title: title, // 分享标题
                    link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: imgUrl, // 分享图标
                    success: function () {
                        // 设置成功
                    }
                })
            });


        }
    });
</script>

</body>
</html>
